import React from 'react';
import { Toast, } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			tel: '',
			pwd: '',
			code: '',
            active: false,
			codetxt: '立即获取',
			code_btn: false,
        }
		this.timer=null
    }
	componentDidMount(){
		document.title = '忘记密码'
	}
	componentWillUnmount(){
		if(this.timer){
			clearInterval(this.timer)
		}
	}
	// 发送验证码
	send_sms(){
		if(this.state.code_btn){
			return;
		}
		var time=120;
		if(this.state.tel.length!==11){
			return Toast.fail('请输入正确的手机号!',1)
		}
		this.setState({
			code_btn: true,
		})
		var req={
			phone: this.state.tel,
			sendtype: 2,
		}
		Toast.loading('发送中..')
		var _this=this;
		global.Ajax.hhtc_request("login/send_sms",req).then(data=>{
			Toast.hide()
			if(data.code===1){
				Toast.success(data.msg,1)
				this.timer=setInterval(() => {
					if(time>0){
						time--;
						_this.setState({
							codetxt: time+'s',
						})
					}else{
						clearInterval(_this.timer)
						_this.setState({
							code_btn: false,
							codetxt: '重新获取',
						})
						time=60;
					}
				}, 1000);
			}else{
				Toast.fail(data.msg, 1);
				this.setState({
					code_btn: false,
				})
			}
		})
	}
	// 修改
	edit(){
		if(this.state.tel.length!==11){
			return Toast.fail('请输入正确的手机号!',1)
		}
		if(this.state.code.length!==6){
			return Toast.fail('请输入验证码!',1)
		}
		if(this.state.pwd.length<6||this.state.pwd.length>16){
			return Toast.fail('请设置6-16位密码!',1)
		}
		Toast.loading()
		var req={
			phone: this.state.tel,
			code:this.state.code,
			password: this.state.pwd,
		}
		global.Ajax.hhtc_request("login/forget",req).then(data=>{
			Toast.hide()
			if(data.code===1){
				Toast.success(data.msg,1,()=>{
					this.props.history.goBack()
				})
			}else{
				Toast.fail(data.msg, 1);
			}
		})
	}
	render(){
		return(
			<div className='login' style={{paddingTop: '5vw',}}>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/tel.png')} className='login_icon' />
					<input onChange={(e)=>{
                        this.setState({
                            tel: e.target.value
                        })
                    }} type='tel' maxLength={11} placeholder='请输入账号' className='login_inpt' />
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/code.png')} className='login_icon' />
					<input onChange={(e)=>{
                        this.setState({
                            code: e.target.value
                        })
                    }} type='tel' maxLength={6} placeholder='请输入验证码' className='login_inpt' />
                    <span className='code_btn' onClick={this.send_sms.bind(this)}>{this.state.codetxt}</span>
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/pwd.png')} className='login_icon' />
					<input onChange={(e)=>{
						this.setState({
							pwd: e.target.value,
						})
					}} type='password' placeholder='请设置6-16位密码' className='login_inpt' />
				</div>
				<p className='login_sub_btn' onClick={this.edit.bind(this)}>确认修改</p>
			</div>
		)
	}
}
